window.addEventListener("load", function () {
	// 动态渲染--将后台数据渲染到html
	// 模拟服务器上的传递过来的数据
	let apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];

	// 遍历后台数据 api分类
	// 添加到html上

	apiTypeData.forEach(function (v, i) {
		if (i === 0) {
			// 渲染到页面
			$(
				"#classify ul"
			).innerHTML += `<li class='classfiy-active' title=${v.keyword}>${v.name}</li>`;
		} else if (v.isnew) {
			$(
				"#classify ul"
			).innerHTML += `<li class='fw-b' title=${v.keyword}>${v.name}</li>`;
		} else {
			$("#classify ul").innerHTML += `<li  title=${v.keyword}>${v.name}</li>`;
		}
	});

	// 分类区按钮点击事件
	// 遍历
	$("#classify li").forEach(function (v, i) {
		// 默认

		// 绑定事件
		v.addEventListener("click", function () {
			// 排他
			$("#classify li").forEach(function (v, i) {
				v.classList.remove("classfiy-active");
			});
			// 自身添加
			v.classList.add("classfiy-active");
			// 并且赋予搜索框相应的值
			$("#searchName").textContent = this.textContent;
			// 赋予搜索框相应的值
			$("#search input").value = this.title;
		});
	});

	// 渲染搜索框

	//API列表区域 模拟服务器返回的数据
	let listDataArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},

		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];
	// 页面
	// 点击事件
	$("#api-3 button").forEach(function (v, i) {
		v.addEventListener("click", function () {
			// 排他
			$("#api-3 button").forEach(function (v) {
				// 被非激活类替换
				v.classList.replace("page-active", "page-unactive");
			});
			// 自身
			v.classList.replace("page-unactive", "page-active");
			// 调用渲染函数

			render(Number(v.textContent), 10, listDataArr);
			// 移入函数
			mouse();
		});
	});

	/**
	 * @description 渲染函数
	 * @param{number,number,object} pagination,pageSize,arr
	 * @returns
	 */
	let str = "../img/";
	function render(pagination, pageSize, arr) {
		// 获取开始下标
		let startIndex = (pagination - 1) * pageSize;
		// 截取对应页数显示的元素数组（总条数中截）--开始到结束（开始+当前页面条数）
		const pageContent = arr.slice(startIndex, startIndex + pageSize);
		console.log(pageContent);
		// 遍历后台数据
		// html接
		let html2 = "";
		// 遍历截取元素数组
		pageContent.forEach(function (v) {
			// 拼接为html结构
			html2 += `<div class="mb-20">
			${v.isSpecial ? "<span class=''>企业专用</span>" : ""}
			<p><img src=${str.concat(v.img)} alt="图片加载不成功" /></p>
			<p><a href='../html/api-details.html' class="fc-blue">${v.name}</a></p>
			<p class="${v.isSpecial ? "fc-red " : "fc-green"}">${v.price}</p>
			<a href='../html/login.html' class="btn-unactive a1">申请数据</a>
			</div>`;
		});
		// 渲染到页面
		$("#api-2").innerHTML = html2;
	}
	// 默认显示第一页
	render(1, 10, listDataArr);
	// 移入函数
	mouse();
	// 移入显示--卡片区button
	// 遍历绑定事件--移入
	function mouse() {
		$("#api-2 div").forEach(function (v, i) {
			v.addEventListener("mouseover", function () {
				// 添加激活类
				this.classList.add("api2-active");
				// 下方button
				$(".a1").forEach(function (v, i) {
					v.classList.replace("btn-active", "btn-unactive");
				});
				$(".a1")[i].classList.replace("btn-unactive", "btn-active");
			});
			// 移出
			v.addEventListener("mouseout", function () {
				// 移出激活类
				this.classList.remove("api2-active");
				// 下方button
				$(".a1").forEach(function (v, i) {
					v.classList.replace("btn-active", "btn-unactive");
				});
				$(".a1")[i].classList.replace("btn-active", "btn-unactive");
			});
		});
	}
});
